<template>
  <div class="content-wrapper">
    <!-- <div class="content-header">固定试卷编辑</div> -->
    <div class="content-container">
      <div style="text-align: center; height: 80%">
        <el-row>
          <el-col :span="4">
            <el-page-header
              size="small"
              content='试卷管理'
              @click="$router.go(-1)"

            />
          </el-col>
        </el-row>
         <el-divider />
        <el-form ref="form" :rules="rules" :model="temp" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="试卷名称" prop="examinationPaperName">
                <el-input
                  v-model="temp.examinationPaperName"
                  placeholder="请输入试卷名称"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="通过分数" prop="passScore">
                <el-input
                  v-model="temp.passScore"
                  placeholder="请输入通过分数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="考试时长" prop="duration">
                <el-input
                  v-model="temp.duration"
                  placeholder="请输入考试时长"
                />
              </el-form-item>
            </el-col>
            <!-- </el-row>
          <el-row> -->
            <el-col :span="5">
              <el-form-item label="状态" prop="status">
                <el-select v-model="temp.status">
                  <el-option
                    v-for="item in [
                      { value: 0, label: '停用' },
                      { value: 1, label: '启用' }
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="允许次数" prop="numberOfExamsAllowed">
                <el-input
                  v-model="temp.numberOfExamsAllowed"
                  placeholder="请输入允许次数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1" class="my-but">
              <el-button
                type="primary"
                round
                size="small"
                @click="saveExaminationPaper"
                >保存</el-button
              >
            </el-col>
            <el-col :span="1">
              <el-button size="small" round @click="toExaminationView"
                >预览</el-button
              >
            </el-col>
            <!-- <el-col :span="1">
            <el-button size="small" @click="$router.go(-1)" type="danger"
              >返回</el-button
            >
          </el-col> -->
          </el-row>
          <!--          <el-row>-->
          <!--          </el-row>-->
        </el-form>
        <div style="margin-top: 10px; height: 108%; text-align: left">
          <el-container style="margin-top: 20px">
            <el-aside
              style="
                width: 48%;
                padding-right: 10px;
                border-right: #a3a0a0 1px solid;
                margin-top: 10px;
              "
            >
              <span class="paper-span"
                >点击表格的某行即可完成数据的添加与删除</span
              >
              <el-table
                :data="
                  !selectExaminationPaperList
                    ? null
                    : selectExaminationPaperList.filter(
                        (data) =>
                          !search ||
                          data.content
                            .toLowerCase()
                            .includes(search.toLowerCase())
                      )
                "
                style="width: 100%; overflow: auto"
                height="500"
                @row-click="deletedExamination"
              >
                <el-table-column
                  prop="content"
                  label="题目"
                  width="180"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="type"
                  label="题型"
                  width="180"
                  :formatter="
                    (row, column, cellValue, index) => {
                      return typeOptions.find((item) => {
                        if (item.key == cellValue) {
                          return item
                        }
                      }).value
                    }
                  "
                />
                <el-table-column prop="score" label="分数" />
                <!-- <el-table-column align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      class="height"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                </el-table-column> -->
              </el-table>
            </el-aside>
            <el-aside style="width: 48%; padding-left: 10px">
              <el-row>
                <el-col :offset="1" :span="4">
                  <el-input
                    v-model="listQuery.content"
                    size="small"
                    placeholder="试题搜索"
                  />
                </el-col>
                <el-col :offset="1" :span="3">
                  <el-select
                    v-model="listQuery.type"
                    placeholder="试题类型"
                    size="small"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    />
                  </el-select>
                </el-col>
                <el-col :offset="3" :span="4">
                  <el-button
                    type="primary"
                    size="small"
                    round
                    @click="getExaminationData"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
              <el-table
                class="paperTable"
                :data="examinationPaperList"
                style="width: 100%; overflow: auto"
                height="500"
                @row-click="selectedExamination"
              >
                <el-table-column
                  prop="content"
                  label="题目"
                  width="180"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="type"
                  label="题型"
                  width="180"
                  :formatter="
                    (row, column, cellValue, index) => {
                      return typeOptions.find((item) => {
                        if (item.key == cellValue) {
                          return item
                        }
                      }).value
                    }
                  "
                />
                <el-table-column prop="score" label="分数" />
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                :page-number.sync="listQuery.pageNumber"
                :page-size.sync="listQuery.pageSize"
                @pagination="getExaminationData"
              />
            </el-aside>
          </el-container>
        </div>
      </div>
      <el-dialog :visible.sync="dialogExaminationPaperView" width="70%">
        <ViewFixedPaper :paper-data="paperData" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import ViewFixedPaper from '@/views/train/examination_list_paper/paperView/viewFixedPaper'
import { getsaveList, pageByPaperId } from '@/api/ts/question'
import {
  saveQuestionSingle,
  deleteQuestionSingle,
  preview,
  getFixed,
  refineFixedPaper
} from '@/api/ts/paper'
import { getExaminationOptions } from '@/api/ts/train.js'
export default {
  name: 'EditFixedPaper',
  components: {
    Pagination,
    ViewFixedPaper
  },
  data() {
    const checkPassScore = (rule, value, callback) => {
      console.log(value, 'value')
      console.log(value === '', 'value')
      if (value === '') {
        callback(new Error('不可为空'))
      }
      if (parseInt(value) > this.temp.totalScore) {
        callback(new Error('通过分数不可大于总分'))
      }
      callback()
    }
    return {
      total: 0,
      search: null,
      selectExaminationPaperList: [],
      examinationPaperList: null,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        content: null,
        type: null
      },
      dialogExaminationPaperView: false,
      paperData: null,
      temp: {
        examinationPaperName: null,
        numberOfExamsAllowed: 1,
        passScore: 1,
        duration: 1
      },
      rules: {
        examinationPaperName: [
          { required: true, message: '不可为空', trigger: 'change' }
        ],
        numberOfExamsAllowed: [
          { required: true, message: '不可为空', trigger: 'change' },
          {
            pattern: /^[1-9][0]{0,1}$/,
            message: '请输1-10之间的正整数',
            trigger: 'change'
          }
        ],
        passScore: [
          { validator: checkPassScore, trigger: 'change' },
          {
            pattern: /^[1-9][0-9]{0,1}$/,
            message: '请输1-100之间的正整数',
            trigger: 'change'
          }
        ],
        duration: [
          { required: true, message: '不可为空', trigger: 'change' },
          {
            pattern: /^(?!0)(?:[0-9]{1,3}|1000)$/,
            message: '请输1-1000之间的正整数',
            trigger: 'change'
          }
        ]
      },
      typeOptions: []
    }
  },
  mounted() {
    this.getExaminationData()
    this.getSelectExaminationPaperList()
  },
  methods: {
    saveExaminationPaper() {
      // 保存试卷信息
      refineFixedPaper(this.temp).then((res) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            refineFixedPaper(this.temp).then((res) => {
              this.$message.success('保存成功')
              this.$router.push('/train/examination_list_paper')
            })
          }
        })
      })
    },
    toExaminationView() {
      var data = {
        examinationPaperId: this.$route.params.examinationPaperId,
        type: 0
      }
      preview(data).then((res) => {
        this.paperData = res.data
        this.dialogExaminationPaperView = true
      })
    },
    getSelectExaminationPaperList() {
      // 获取试卷试题信息
      pageByPaperId({
        examinationPaperId: this.$route.params.examinationPaperId
      }).then((res) => {
        console.log(
          this.selectExaminationPaperList,
          'this.selectExaminationPaperList'
        )
        if (res.data) {
          this.selectExaminationPaperList = res.data
          return
        }
        this.selectExaminationPaperList = []
      })
    },
    deletedExamination(row, event, column) {
      // 删除已存在试题
      var deleteData = {
        examinationPaperId: this.$route.params.examinationPaperId,
        examinationQuestionId: row.examinationQuestionId
      }
      deleteQuestionSingle(deleteData).then((res) => {
        this.getSelectExaminationPaperList()
        this.getExaminationData()
        this.$message.info('删除成功')
      })
    },
    selectedExamination(row, event, column) {
      // 点击试题选择
      console.log(
        this.selectExaminationPaperList,
        'this.selectExaminationPaperList'
      )
      var datalist = this.selectExaminationPaperList.filter((item) => {
        if (item.examinationQuestionId == row.examinationQuestionId) {
          return item
        }
      })

      if (datalist.length > 0) {
        this.$message.info('已经存在')
        return
      }
      var saveData = {
        examinationPaperId: this.$route.params.examinationPaperId,
        examinationQuestionId: row.examinationQuestionId
      }
      saveQuestionSingle(saveData).then((res) => {
        this.getSelectExaminationPaperList()
        this.getExaminationData()
        this.$message.success('添加成功')
      })
    },
    async getExaminationData() {
      await getExaminationOptions().then((res) => {
        this.typeOptions = res.data.examinationQuestionType
      })
      // 页面加载获取数据
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      getsaveList(this.listQuery).then((res) => {
        this.examinationPaperList = res.data.rows
        this.total = res.data.total
      })
      var data = {
        examinationPaperId: this.$route.params.examinationPaperId,
        type: 0
      }
      getFixed(data).then((res) => {
        this.temp = res.data
        console.log(this.temp, 'this.temp')
      })
    },
    aa(row, column, cellValue, index) {
      return this.typeOptions.find((item) => {
        if (item.key == cellValue) {
          return item
        }
      }).value
    }
  }
}
</script>

<style lang="scss">
.title {
  line-height: 31px;
  width: 30%;
  border: #b3b3b6 solid 1px;
  border-radius: 5px;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0px 0px 3px #333333;
}
.el-container {
  height: 100%;
}
.height >>> .el-input--small .el-input__inner {
  height: 22px;
}
.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
}
.my-but {
  margin-right: 10px;
}
.paper-span {
  font-size: 12px;
  color: #c0c4cc;
}
</style>
